<template>
    <div class="main-page">
            <div class="content-box">
                <Row type="flex" justify="center" align="middle" class-name="top-box">
                    <Col class="top-box-content">
                        啦啦啦
                    </Col>
                </Row>
                <Row :gutter="20">
                    <Col span="12">
                        <dv-border-box-7>
                            <types-company-histogram-echart :width="echartWidth" :height="250"></types-company-histogram-echart>
                        </dv-border-box-7>
                    </Col>
                    <Col span="12" style="height: 310px !important;" >
                        <dv-border-box-7>
                            <types-company-rotation-echart :width="echartWidth" :height="260"></types-company-rotation-echart>
                        </dv-border-box-7>
                    </Col>
                </Row>
                <Row :gutter="20" class="down">
                    <Col span="12">
                        <dv-border-box-7>
                            <types-company-line-echart :width="echartWidth" :height="260"></types-company-line-echart>
                        </dv-border-box-7>
                    </Col>
                    <Col span="12">
                        <dv-border-box-7>
                            <types-company-pie-echart :width="600" :height="240"></types-company-pie-echart>
                        </dv-border-box-7>
                    </Col>
                </Row>
            </div>
    </div>
</template>

<script>
import TypesCompanyPieEchart from '../../../../components/echarts/types-company-pie-echart/index'
import TypesCompanyRotationEchart from '../../../../components/echarts/types-company-rotation-echart/index'
import TypesCompanyHistogramEchart from '../../../../components/echarts/types-company-histogram-echart/index'
import TypesCompanyLineEchart from '../../../../components/echarts/types-company-line-echart/index'
export default {
  components: { TypesCompanyLineEchart, TypesCompanyHistogramEchart, TypesCompanyRotationEchart, TypesCompanyPieEchart },
  data () {
    return {
      echartWidth: (document.documentElement.clientWidth - 200) / 2,
      echartHeight: (document.documentElement.clientHeight - 330) / 2
    }
  },
  mounted () {
    // this.$router.push({ path: '/record/list' })
  },
  methods: {
  }
}
</script>

<style scoped lang="less">
    .main-page {
        /*background-color: #3AB0FA;*/
        background-image: radial-gradient(#3e00ff, #0720ff, #002b80);
        /*background-image: linear-gradient(#090897, #012b95);*/
        height: 100%;

        .content-box {
            padding: 20px;
            height: 100%;

            .top-box {
                flex-direction: column;
                margin-bottom: 20px;

                .top-box-content {
                    font-size: 18px;
                    font-weight: bold;
                    margin-bottom: -15px;
                    color: #d7f5ff;
                }
            }

            .bottom-box {
                margin-top: 10%;
            }
        }
    }
    .down{
        margin-top: 20px;
    }
</style>
